import React, { Component } from 'react';
import { NavBar, Icon, Switch, Modal, Toast, DatePicker, List } from 'antd-mobile';
import './edit.scss'
const alert = Modal.alert;
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const element1 =(
  <><img src="images/jg_03.png" alt=""/><p>请完善信息后提交！</p></>
)
export default class componentName extends Component {
  state = {
    checked: false,
    checked1: false,
    date: now
  }
  render() {
    return (
      <>
      <div className="edit-header">
        <NavBar
          mode="light"
          icon={<Icon type="left"/>}
          onLeftClick={() => {
            alert('信息未保存', '当前内容已发生更变，是否保存后继续?', [
              { text: '取消', onPress: () => console.log('cancel') },
              { text: '保存', onPress: () => {
                window.history.back()
              } },
            ])
          }}
          rightContent={
            <div>
              <span onClick={()=>{
                Toast.info(element1, 1);
              }}>提交</span>
            </div>
          }
        >校园新闻</NavBar>
    </div>
    <div className="edit-content">
      <div className="edit-bt">
        <p>新闻主标题<span>*</span></p>
        <input type="text" placeholder="请输入新闻主标题"/>
      </div>
      <div className="edit-bt">
        <p>新闻副标题</p>
        <input type="text" placeholder="请输入新闻副标题（非必填）"/>
      </div>
      <div className="edit-bt">
        <p>封面图片</p>
        <input type="text" placeholder="上传图片"/>
      </div>
      <div className="edit-nr">
        <p>新闻详情<span>*</span></p>
        <textarea name="" id="textareaa" cols="30" rows="10"  placeholder="请输入新闻详情"></textarea>
      </div>
      <div className="edit-xx">
        <ul>
          <li>
            <span>定时发布</span><span><Switch
            checked={this.state.checked}
            onChange={() => {
              this.setState({
                checked: !this.state.checked,
              });
            }}
          /></span>
          </li>
          <List className="date-picker-list" style={{ backgroundColor: 'white' }}>
            <DatePicker
            mode="date"
            title="请选择"
            extra="点击设置"
            value={this.state.date}
            onChange={date => this.setState({ date })}
            >
              <List.Item arrow="horizontal">定时发布时间</List.Item>
            </DatePicker>
          </List>
          {/* <li>
            <span>定时发布</span>
          </li> */}
          <li>
            <span>推送给班牌</span><span><Switch
            checked={this.state.checked1}
            onChange={() => {
              this.setState({
                checked1: !this.state.checked1,
              });
            }}
          /></span>
          </li>
        </ul>
        {/* <div>
        <DatePicker
          mode="date"
          title="Select Date"
          extra="Optional"
          value={this.state.date}
          onChange={date => this.setState({ date })}
        >
        </DatePicker>
        </div> */}
      </div>
    </div>
    </>
    );
  }
}
